<template>
    <div class="organization-content">
        <div class="search-tree-keyword">
            <el-input
                placeholder="请输入"
                prefix-icon="el-icon-search"
            ></el-input>
        </div>
        <div class="organization-tree">
            <tree @addTreeNode="addTreeNode" :treeList="newTreeNode"></tree>
        </div>
        <employee
            ref="employeeInfo"
            @addOrganizationNode="appendNode"
            :propSuperior="parentsNodeName"
            :treeList="newTreeNode"
        ></employee>
    </div>
</template>

<script>
import Tree from './organization-tree.vue'
import Employee from './organization-employee.vue'
import mockOrganizations from '@/common/modul/organization.ts'

import { appendTreeNode } from '@/utils/tree.ts'

/* 用于维护组织树内容 */
export default {
    data() {
        return {
            /** 用于employee的级联组件 */
            parentsNodeName: [],

            /** 实时新版组织树 */
            newTree: mockOrganizations
        }
    },
    computed: {
        newTreeNode() {
            return this.newTree
        }
    },
    methods: {
        /** 点击Tree组件的添加事件 */
        addTreeNode(treeName) {
            // 用于employee的级联组件默认值
            this.parentsNodeName = treeName

            // 显示出添加组织模块
            this.$refs.employeeInfo.showAddModule()
        },

        /** 插入节点 */
        appendNode(organizationInfo) {
            appendTreeNode(this.newTree, organizationInfo)
        }
    },
    components: {
        Tree,
        Employee
    }
}
</script>

<style lang="less" scoped>
.organization-content {
    display: flex;
    margin: 15px 15px 0;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    height: calc(100% - 25px);
}
.search-tree-keyword {
    position: absolute;
    top: 25px;
    left: 20px;
    width: 235px;
    /deep/ .el-input__inner {
        height: 32px;
        line-height: 32px;
        border-radius: 60px;
        background-color: #f7f8f8;
    }
}
.organization-tree {
    position: absolute;
    width: 255px;
    top: 20px;
    bottom: 0;
    left: 20px;
    background-color: #fff;
    overflow-y: scroll;
    overflow-x: scroll;
    margin-top: 52px;
}
</style>
